<!--#
layout("/layouts/platform.html"){
#-->
<style>
    .loglevel span {
        float:left;
        padding-top: 5px;
        padding-left: 5px;
    }
</style>
<div id="app" v-cloak>
    <el-row class="mt15 ml15">
        <el-row>
            <el-col v-for="item in tableData" style="padding-left: 10px; padding-right: 20px;">
                <el-card class="mb15">
                    <div slot="header" class="clearfix">
                        <span>实例名: {{item[0].name}}</span>
                        <el-button style="float: right; padding: 5px 3px" type="text" icon="el-icon-refresh"  @click="pageData"></el-button>
                        <el-button style="float: right; padding: 5px 3px" type="text" icon="el-icon-edit" @click="openLoglevel({action:'name',name:item[0].name,loglevel:item[0].loglevel})"></el-button>
                    </div>
                    <div v-for="log in item" class="textitem">
                        <el-card style="margin-bottom: 5px;">
                        <div class="loglevel">
                            <span>进程ID: {{log.processId}}</span>
                            <span>日志等级: {{log.loglevel}}</span>
                            <span>运行时间: {{formatUptime(log.uptime)}}</span>
                            <span style="margin-left: 20px;">JVM</span>
                            <span>Total: {{log.vmTotal}}MB</span>
                            <span>Use: {{log.vmUse}}MB</span>
                            <span>Free: {{log.vmFree}}MB</span>
                            <span>Max: {{log.vmMax}}MB</span>
                        </div>
                        <div>
                            <el-button style="right:0;padding-left: 10px;padding-top:5px;" type="text" icon="el-icon-edit" @click="openLoglevel({action:'processId',name:log.name,processId:log.processId,loglevel:log.loglevel})"></el-button>
                        </div>
                        </el-card>
                    </div>
                </el-card>
            </el-col>
        </el-row>

    </el-row>
    <el-dialog
            title="日志等级"
            :visible.sync="loglevelDialogVisible"
            width="40%">
        <el-form label-width="20px">
            <el-form-item >
                实例名: {{formData.name}}    进程ID:{{formData.processId||"所有进程"}}
            </el-form-item>
            <el-form-item >
                <el-radio-group v-model="formData.loglevel" size="medium">
                    <el-radio label="INFO">INFO</el-radio>
                    <el-radio label="WARN">WARN</el-radio>
                    <el-radio label="ERROR">ERROR</el-radio>
                    <el-radio label="DEBUG">DEBUG</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="loglevelDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doLoglevel">确 定</el-button>
                  </span>
    </el-dialog>
</div>

<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                loglevelDialogVisible:false,
                loglevelDialogTitle:"",
                tableData: [],
                formData:{}
            }
        },
        methods: {
            formatUptime: function (val) {
                var up=moment(val*1000);
                var now=moment();
                var hours=now.diff(up,'hours');
                var minutes=now.diff(up,'minutes')%60;
                var seconds=now.diff(up,'seconds')%60;
                return hours+"小时"+minutes+"分钟"+seconds+"秒";
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/sys/monitor/data", {}, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            openLoglevel:function (obj) {
                var self=this;
                self.formData=obj;
                if(obj.action=="name"){
                    self.loglevelDialogTitle="实例名: "+obj.name;
                }
                if(obj.action=="processId"){
                    self.loglevelDialogTitle="实例名: "+obj.name+" 进程ID: "+obj.processId;
                }
                self.loglevelDialogVisible=true;
            },
            doLoglevel:function () {
                var self=this;
                $.post(base + "/platform/sys/monitor/loglevel", self.formData, function (data) {
                    if (data.code == 0) {
                        self.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        self.loglevelDialogVisible = false;
                        self.pageData();
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            }
        },
        created: function () {
            this.pageData();
        }
    });
</script>
<!--#
}
#-->